<template>
    <myMoveBox ref="myMoveBoxDom" :attr="curAttr">
        <template #show>
            <img class="icon-move" style="width:30px;height:30px" src="@/static/icon/close-w.svg" />
        </template>
        <template #hide>
            <div class="del-box b" @click.stop="offDel_ClickEvent">
                <img style="width:30px;height:30px" src="@/static/icon/close-w.svg" @click.stop="del_ClickEvent" />
            </div>
        </template>
    </myMoveBox>
    <div class="shadow" :style="divCss"></div>
</template>

<script setup>
import myMoveBox from '@/components/moveBox-v2/index-extra.vue'
import { watch } from 'vue';

const curAttr = {
    posiIndex: [0, 1],//起始下标
    whCount: [1, 1],//宽高长度
    zIndex: [990, 990],//图层
    backcolor: ['#409eff', '#409eff'],//背景颜色
    isClick: false,//默认点击
};

const myMoveBoxDom = ref();
let state = ref(0);//0:小窗口,1:待删除,2:正在删除
const divCss = ref();
let curRect = {};
let curId = 0;


const emits = defineEmits(['delOk']);

watch(state, (newV, oldV) => {
    if (newV == 0) {
        // myMoveBoxDom.value.setIsMove(true);
        document.querySelector('.message-root').onmousewheel = function () {
            return true
        }
    } else {
        // myMoveBoxDom.value.setIsMove(false);
        document.querySelector('.message-root').onmousewheel = function () {
            return false
        }
    }
})

const del = (id) => {
    if (state.value == 1 || state.value == 0) {
        const cur = document.querySelector('#floor' + id);
        curRect = cur.getBoundingClientRect();
        const { x, y, width, height } = curRect;
        myMoveBoxDom.value.show({
            wh: [width, height],
            xy: [x, y],
            isLog: state.value == 0 ? true : false,
        });
        curId = id;
        state.value = 1;
    }
}

const offDel_ClickEvent = () => {
    if (state.value == 1) {
        myMoveBoxDom.value.hide();
        state.value = 0;
    }
}

const del_ClickEvent = () => {
    //执行删除
    if (state.value == 1) {
        delAnime();
    }
}

const delAnime = () => {
    state.value = 2;
    const { x, y, width, height } = curRect;
    myMoveBoxDom.value.moveTo({
        wh: [40, height], xy: [x, y], isLog: false
    });
    divCss.value = `width:0px;height:${height}px;top:${y}px;left:${x}px;`;
    setTimeout(() => {
        myMoveBoxDom.value.moveTo({ wh: [40, height], xy: [width + x - 40, y], isLog: false, duration: 1.0 });
        divCss.value = `width:${width}px;height:${height}px;top:${y}px;left:${x}px;transition-duration:1s;`;
        setTimeout(() => {
            myMoveBoxDom.value.hide();
            state.value = 0;
            divCss.value = `width:${width}px;height:0px;top:${y}px;left:${x}px;transition-duration:0.5s;`;
            // emits('delOk', curId);
        }, 1400);
    }, 400);
}

defineExpose({
    del,
})
</script>

<style scoped lang="scss">
.del-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.3s;

}

.shadow {
    position: fixed;
    background-image: url('$/images/03.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
</style>